<template>

  <div style="display: flex;">

    <el-card style="width: 50%">
      <div style="display: flex; justify-content: center; align-items: center;">
        <el-icon class="password">
          <Platform/>
        </el-icon>
      </div>
      <div class="login" style="display: flex; justify-content: center; align-items: center; margin-top: 15px">
        登录密码
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px">
        定期更换密码有助于账号安全
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px">
        <el-button class="loginA" size="large" @click="loginShow=true;">修改登录密码</el-button>
      </div>
    </el-card>

    <el-card style="width: 50%; margin-left: 20px">
      <div style="display: flex; justify-content: center; align-items: center;">
        <el-icon class="password">
          <EditPen/>
        </el-icon>
      </div>
      <div class="login" style="display: flex; justify-content: center; align-items: center; margin-top: 15px">
        支付密码
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px">
        支付所购买商品或服务时使用
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px">
        <el-button class="loginA" size="large" @click="payShow=true;">修改支付密码</el-button>
      </div>
    </el-card>

  </div>

  <!-- 登录密码对话框开始 -->
  <el-dialog v-model="loginShow" title="登录密码" width="500">
    <el-form>
      <el-form-item label="原密码" label-width="20%">
        <el-input v-model="user.password" placeholder="请输入原登录密码" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="新密码" label-width="20%">
        <el-input v-model="new1Password" placeholder="请输入新登录密码" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="确认新密码" label-width="20%">
        <el-input v-model="new2Password" placeholder="请输入新登录密码" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="loginShow = false">取消</el-button>
        <el-button type="primary" @click="updateLogin">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--登录密码对话框结束-->

  <!-- 支付密码对话框开始 -->
  <el-dialog v-model="payShow" title="支付密码" width="500">
    <el-form>
      <el-form-item label="原密码" label-width="20%">
        <el-input v-model="userP.password" placeholder="请输入原登录密码" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="新密码" label-width="20%">
        <el-input v-model="new1Password" placeholder="请输入新支付密码" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="确认新密码" label-width="20%">
        <el-input v-model="new2Password" placeholder="请输入新支付密码" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="payShow = false">取消</el-button>
        <el-button type="primary" @click="updatePay">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--支付密码对话框结束-->

</template>

<script setup>
import {EditPen, Platform} from "@element-plus/icons-vue";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import userApi from "@/api/userApi.js";

//是否显示修改登录密码的对话框
const loginShow = ref(false);

//是否显示修改支付密码的对话框
const payShow = ref(false);

//用户登录信息
const user = ref({
  id: null,
  username: null,
  password: null,
  payPassword: null
});

//用户支付信息
const userP = ref({
  id: null,
  username: null,
  password: null,
  payPassword: null
});

//第一次新密码
const new1Password = ref(null);

//第二次新密码
const new2Password = ref(null);

//修改登录
function updateLogin() {
  if (user.value.password == null) {
    ElMessage.error("请输入登录密码");
    return false;
  }

  if (user.value.password == new1Password.value) {
    ElMessage.error("原密码和新密码不能一致");
    return false;
  }
  if (new1Password.value == null) {
    ElMessage.error("请输入密码");
    return false;
  }

  if (new1Password.value != new2Password.value) {
    ElMessage.error("两次密码不一致");
    return false;
  }
  loginShow.value = false;
  user.value.password = new1Password.value;
  userApi.updateLogin(user.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          user.value = {
            id: null,
            username: null,
            password: null,
            payPassword: null,
          }
          new1Password.value = null;
          new2Password.value = null;
          loginShow.value = false;
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

//修改支付
function updatePay() {
  if (userP.value.password == null) {
    ElMessage.error("请输入登录密码");
    return false;
  }
  if (new1Password.value == null) {
    ElMessage.error("请输入支付密码");
    return false;
  }
  if (new1Password.value != new2Password.value) {
    ElMessage.error("两次密码不一致");
    return false;
  }

  userP.value.payPassword = new1Password.value;
  userApi.updatePay(userP.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          userP.value = {
            id: null,
            username: null,
            password: null,
            payPassword: null,
          }
          new1Password.value = null;
          new2Password.value = null;
          payShow.value = false;
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

</script>

<style scoped>
.password {
  font-size: 70px;
  color: paleturquoise;
}

.login {
  font-size: 20px;
}

.loginA {
  border: 1px solid black;
}
</style>